[EuiSuperDatePicker] Time window buttons #9151

acstll · 2025-10-27T14:51:51Z

Summary

Important

This PR merges into a feature branch

This adds a button group to the EuiSuperDatePicker under the showTimeWindowButtons boolean prop.

It makes it possible to modify the time window without opening any popovers. Includes controls to shift the window forwards and backwards, and zoom out (expand the window).

Resolves https://github.com/elastic/eui-private/issues/438 🔒

Why are we making this change?

As part of a series of improvements to EuiSuperDatePicker that should have a positive immediate impact for users.

Screenshots

Figma

Impact to users

🟢 No impact. The prop defaults to false, so it's opt-in.

QA

Double-check acceptance criteria is met 🔒
Check docs are easy to follow and cover the basics

Accessibility

Currently the buttons have aria-pressed which make them appear as toggle buttons to screen readers. #9164 should unblock a fix (to remove the isSelected prop).

NVDA output on focus:

Previous toggle button not pressed
Previous 15 minutes

General checklist

Browser QA
- Checked in both light and dark modes
- Checked in both MacOS and Windows high contrast modes
  - ~~(emulate forced colors if you do not have access to a Windows machine.)~~
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- Checked for accessibility including keyboard-only and screenreader modes
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- Checked Code Sandbox works for any docs examples
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist
- A changelog entry exists and is marked appropriately
- ~~If applicable, added the breaking change issue label (and filled out the breaking change checklist)~~
- ~~If the changes unblock an issue in a different repo, smoke tested carefully (see Testing EUI features in Kibana ahead of time)~~
Designer checklist
- If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

- step forward and backward - zoom out

also make zoom factor an option in the hook

…ng tests

- add zoomFactor as prop - move TimeWindowButtonsConfig into same file

and lint…

the aria-pressed attribute on buttons needs to be removed, in a different PR

might need another update if EuiButtonGroupButton gets updated too

weronikaolejniczak · 2025-11-03T15:55:10Z

...i/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png

Love that VRT test... 🙃

packages/eui/src/components/date_picker/super_date_picker/time_window_buttons.tsx

weronikaolejniczak · 2025-11-03T16:41:54Z

packages/eui/src/components/date_picker/super_date_picker/time_window_buttons.tsx

I really like the cleanliness of the file 👏🏻 The component + stateful logic in a hook, the useGeneratedHtmlId, i18n, the utility functions...

packages/website/docs/components/forms/date-and-time/super-date-picker.mdx

packages/eui/src/components/date_picker/super_date_picker/time_window_buttons.tsx

weronikaolejniczak · 2025-11-03T16:54:28Z

Testing

A possible improvement to EuiSuperDatePicker could be that shift when loading... 😬 It's a bit jarring

Is it expected that on toggling isAutoRefreshOnly the buttons move to the bottom?

… invalid states

acstll · 2025-11-04T17:05:39Z

A possible improvement to EuiSuperDatePicker could be that shift when loading... 😬 It's a bit jarring

I believe this is a thing in Storybook, but IRL the experience should be different

Is it expected that on toggling isAutoRefreshOnly the buttons move to the bottom?

great catch! I think the buttons shouldn't be visible at all, addressed in 0680122

Addressed all comments and pushed updates for most of them, thanks again for such an amazing review @weronikaolejniczak!

elasticmachine · 2025-11-05T09:02:52Z

💚 Build Succeeded

History

💚 Build #1819 succeeded cd48c7a
💚 Build #1776 succeeded da66b3c
💚 Build #1770 succeeded ce59f27
💚 Build #1759 succeeded d52cddb
💚 Build #1758 succeeded 7c70b82
💚 Build #1739 succeeded 9c0cc3d

cc @acstll

elasticmachine · 2025-11-05T09:44:52Z

💚 Build Succeeded

Buildkite Build
Commit: 286650c

History

💚 Build #5133 succeeded cd48c7a
💚 Build #5097 succeeded da66b3c
💔 Build #5091 failed ce59f27
💚 Build #5082 succeeded d52cddb
💚 Build #5081 succeeded 7c70b82

cc @acstll

weronikaolejniczak

I believe that this is working well and the code quality is superb! Since we're merging into a feature branch and not main, there’ll still be time to fine-tune things later. For now it's excellent 🚀 🟢 Thanks for your hard work, Arturo, and for applying my suggestions!

This reverts commit cf0a055. Wrongly included here because of a rebase

- `@elastic/eui`: `v109.0.0` ⏩ `v109.1.0` - `@elastic/eslint-plugin-eui`: `v2.5.0` ⏩ `v2.6.0` --- ## Changes - Updated i18n EUI mapping 6cc95b0 - Updated test in Unified Search 668948f ## Package updates ### `@elastic/eui` [`v109.1.0`](https://github.com/elastic/eui/releases/v109.1.0) - Added `--euiBottomBarOffset` CSS variable to `EuiBottomBar` for positioning other fixed elements relative to the bottom bar's height ([#9211](elastic/eui#9211)) - Updated `boxesVertical` icon and restored `checkInCircleFilled`, `errorFilled`, and `warningFilled` icons. ([#9194](elastic/eui#9194)) - Updated `EuiSuperDatePicker` with new time zone information, opt-in via `timeZoneDisplayProps`. ([#9191](elastic/eui#9191)) - Updated the position of `EuiModal` by removing bottom padding in `EuiOverlayMask` ([#9190](elastic/eui#9190)) - Added `EuiPopover` and `EuiToolTip`'s `repositionOnScroll` to `componentDefaults` ([#9152](elastic/eui#9152)) - Updated `EuiSuperDatePicker` with new time window buttons for time shifting and zoom out, opt-in via `showTimeWindowButtons` boolean prop. ([#9151](elastic/eui#9151)) - Added beta prop `hasAriaDisabled` to all base button components: `EuiButton`, `EuiButtonEmpty`, `EuiButtonIcon`, `EuibuttonGroup`, `EuiFilterButton` ([#9201](elastic/eui#9201)) - Added `euiDisabledSelector` variable that combines CSS selectors `:disabled` and `[aria-disabled="true"]` ([#9201](elastic/eui#9201)) - Added custom test matchers that check for both `disabled` and `aria-disabled` attributes: ([#9201](elastic/eui#9201)) - React testing Library: `.toBeEuiDisabled()` - Enzyme: `.toHaveEuiDisabledProp()` - Cypress: `should('be.euiDisabled)` **Bug fixes** - Fixed unexpected duplicate columns in `EuiDataGrid` crashing the column sorting by removing duplicate columns entirely ([#9209](elastic/eui#9209)) - Fixed a visual bug in `EuiTable` where long table row content would be cut off on mobile screens ([#9206](elastic/eui#9206)) - Fixed virtualized `EuiCodeBlock` rendering blank lines when content updates if scrolled. ([#9196](elastic/eui#9196)) - Fixed `EuiButtonGroup` button sizing to ensure square buttons when used with `isIconOnly=true` ([#9170](elastic/eui#9170)) **Accessibility** - Fixed an issue where portalled components like `EuiPopover` were not included in `EuiFlyout`'s focus trap through `includeSelectorInFocusTrap`, making them inaccessible to keyboard users ([#9103](elastic/eui#9103)) ### `@elastic/eslint-plugin-eui` [`v2.6.0`](https://github.com/elastic/eui/blob/main/packages/eslint-plugin/changelogs/CHANGELOG_2025.md#v260) - Added new `require-table-caption` rule. ([#9168](elastic/eui#9168)) --------- Co-authored-by: Elastic Machine <[email protected]>

- `@elastic/eui`: `v109.0.0` ⏩ `v109.1.0` - `@elastic/eslint-plugin-eui`: `v2.5.0` ⏩ `v2.6.0` --- ## Changes - Updated i18n EUI mapping 6cc95b0 - Updated test in Unified Search 668948f ## Package updates ### `@elastic/eui` [`v109.1.0`](https://github.com/elastic/eui/releases/v109.1.0) - Added `--euiBottomBarOffset` CSS variable to `EuiBottomBar` for positioning other fixed elements relative to the bottom bar's height ([elastic#9211](elastic/eui#9211)) - Updated `boxesVertical` icon and restored `checkInCircleFilled`, `errorFilled`, and `warningFilled` icons. ([elastic#9194](elastic/eui#9194)) - Updated `EuiSuperDatePicker` with new time zone information, opt-in via `timeZoneDisplayProps`. ([elastic#9191](elastic/eui#9191)) - Updated the position of `EuiModal` by removing bottom padding in `EuiOverlayMask` ([elastic#9190](elastic/eui#9190)) - Added `EuiPopover` and `EuiToolTip`'s `repositionOnScroll` to `componentDefaults` ([elastic#9152](elastic/eui#9152)) - Updated `EuiSuperDatePicker` with new time window buttons for time shifting and zoom out, opt-in via `showTimeWindowButtons` boolean prop. ([elastic#9151](elastic/eui#9151)) - Added beta prop `hasAriaDisabled` to all base button components: `EuiButton`, `EuiButtonEmpty`, `EuiButtonIcon`, `EuibuttonGroup`, `EuiFilterButton` ([elastic#9201](elastic/eui#9201)) - Added `euiDisabledSelector` variable that combines CSS selectors `:disabled` and `[aria-disabled="true"]` ([elastic#9201](elastic/eui#9201)) - Added custom test matchers that check for both `disabled` and `aria-disabled` attributes: ([elastic#9201](elastic/eui#9201)) - React testing Library: `.toBeEuiDisabled()` - Enzyme: `.toHaveEuiDisabledProp()` - Cypress: `should('be.euiDisabled)` **Bug fixes** - Fixed unexpected duplicate columns in `EuiDataGrid` crashing the column sorting by removing duplicate columns entirely ([elastic#9209](elastic/eui#9209)) - Fixed a visual bug in `EuiTable` where long table row content would be cut off on mobile screens ([elastic#9206](elastic/eui#9206)) - Fixed virtualized `EuiCodeBlock` rendering blank lines when content updates if scrolled. ([elastic#9196](elastic/eui#9196)) - Fixed `EuiButtonGroup` button sizing to ensure square buttons when used with `isIconOnly=true` ([elastic#9170](elastic/eui#9170)) **Accessibility** - Fixed an issue where portalled components like `EuiPopover` were not included in `EuiFlyout`'s focus trap through `includeSelectorInFocusTrap`, making them inaccessible to keyboard users ([elastic#9103](elastic/eui#9103)) ### `@elastic/eslint-plugin-eui` [`v2.6.0`](https://github.com/elastic/eui/blob/main/packages/eslint-plugin/changelogs/CHANGELOG_2025.md#v260) - Added new `require-table-caption` rule. ([elastic#9168](elastic/eui#9168)) --------- Co-authored-by: Elastic Machine <[email protected]>

Render toolbar UI

8fed495

acstll self-assigned this Oct 27, 2025

acstll added 16 commits October 27, 2025 17:30

Implement time window logic

c83ed61

- step forward and backward - zoom out

Correct method name

357e577

[TimeWindowToolbar] Make which buttons to show configurable

4e742f8

[TimeWindowToolbar] Add tilde prefix for _inexact_ ranges only

9e06fce

also make zoom factor an option in the hook

[TimeWindowToolbar] Rename variables for readability

596fc01

[TimeWindowToolbar] Fix displayInterval, consistent tilde, start addi…

9c0cc3d

…ng tests

[TimeWindowButtons] Rename TimeWindowToolbar

095dcb6

- add zoomFactor as prop - move TimeWindowButtonsConfig into same file

[TimeWindowButtons] Zoom factor default to 0.5

548659c

[TimeWindowButtons] Display full units instead of short hand in tooltips

f605001

[TimeWindowButtons] Add unit tests for useTimeWindow hook

9595438

[TimeWindowButtons] Test integration in EuiSuperDatePicker

87df23b

[TimeWindowButtons] Translate labels and tooltips

46bbc7c

and lint…

[TimeWindowButtons] Test disabled state

7c70b82

Remove leftovers of previous toolbar naming

034a66b

[Docs][EuiSuperDatePicker] Add Time window buttons section

89ce75e

[EuiSuperDatePicker] Add TimeWindowButtons story

d52cddb

acstll changed the title ~~[EuiSuperDatePicker] Time window toolbar~~ [EuiSuperDatePicker] Time window buttons Oct 30, 2025

acstll added 5 commits October 31, 2025 09:33

[Docs] Polish example snippet

2481264

[TimeWindowButtons] Improve screen-reader output

68a1f47

the aria-pressed attribute on buttons needs to be removed, in a different PR

[TimeWindowButtons] Fix compressed styles

cb338c7

Update VRT

c7a1559

might need another update if EuiButtonGroupButton gets updated too

Changelog

ce59f27

acstll mentioned this pull request Oct 31, 2025

[EuiButtonGroupButton] Make isSelected prop optional #9164

Merged

15 tasks

Lint, argh

da66b3c

acstll marked this pull request as ready for review October 31, 2025 11:48

acstll requested a review from a team as a code owner October 31, 2025 11:48

weronikaolejniczak self-requested a review November 3, 2025 12:06

weronikaolejniczak reviewed Nov 3, 2025

View reviewed changes

packages/eui/src/components/date_picker/super_date_picker/time_window_buttons.tsx Outdated Show resolved Hide resolved

weronikaolejniczak reviewed Nov 3, 2025

View reviewed changes

packages/eui/src/components/date_picker/super_date_picker/time_window_buttons.tsx Outdated Show resolved Hide resolved

weronikaolejniczak reviewed Nov 3, 2025

View reviewed changes

packages/website/docs/components/forms/date-and-time/super-date-picker.mdx Show resolved Hide resolved

weronikaolejniczak reviewed Nov 3, 2025

View reviewed changes

packages/eui/src/components/date_picker/super_date_picker/time_window_buttons.tsx Show resolved Hide resolved

acstll added 6 commits November 4, 2025 12:56

[EuiSuperDatePicker][Tests] Remove unnecessary bangs

5de7681

[TimeWindowButtons] Rename config props to be more explicit

6c50c8b

[TimeWindowButtons] Do not show when isAutoRefreshOnly is true

0680122

[EuiSuperDatePicker] Move isRelativeToNow util to shared utils file

a5e2e0d

[TimeWindowButtons] Improve date/time parsing, more gracefully handle…

8b65549

… invalid states

[TimeWindowButtons] Improve util that provides final zoom factor value

cd48c7a

acstll requested a review from weronikaolejniczak November 4, 2025 17:07

[EuiSuperDatePicker] Test actual time shifted or zoomed out

286650c

weronikaolejniczak approved these changes Nov 5, 2025

View reviewed changes

acstll merged commit d3a96ed into elastic:feat/super-date-picker-track-1-ms-1 Nov 5, 2025
4 checks passed

acstll added a commit that referenced this pull request Nov 6, 2025

[EuiSuperDatePicker] Time window buttons (#9151)

621ba86

acstll added a commit that referenced this pull request Nov 13, 2025

[EuiSuperDatePicker] Time window buttons (#9151)

261a35e

This was referenced Nov 14, 2025

[EuiSuperDatePicker] Improvements (batch 1) #9210

Merged

Update EUI to v109.1.0 elastic/kibana#243270

Merged

acstll added a commit to acstll/eui that referenced this pull request Nov 18, 2025

[EuiSuperDatePicker] Time window buttons (elastic#9151)

cf0a055

acstll added a commit to acstll/eui that referenced this pull request Nov 18, 2025

Revert "[EuiSuperDatePicker] Time window buttons (elastic#9151)"

b133434

This reverts commit cf0a055. Wrongly included here because of a rebase

acstll added a commit to acstll/eui that referenced this pull request Nov 18, 2025

[EuiSuperDatePicker] Time window buttons (elastic#9151)

d6165d2

acstll added a commit to acstll/eui that referenced this pull request Nov 18, 2025

Revert "[EuiSuperDatePicker] Time window buttons (elastic#9151)"

f469a97

This reverts commit cf0a055. Wrongly included here because of a rebase

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[EuiSuperDatePicker] Time window buttons #9151

[EuiSuperDatePicker] Time window buttons #9151

Uh oh!

acstll commented Oct 27, 2025 •

edited

Loading

Uh oh!

weronikaolejniczak Nov 3, 2025

Uh oh!

Uh oh!

Uh oh!

weronikaolejniczak Nov 3, 2025

Uh oh!

Uh oh!

Uh oh!

weronikaolejniczak commented Nov 3, 2025 •

edited

Loading

Uh oh!

acstll commented Nov 4, 2025

Uh oh!

elasticmachine commented Nov 5, 2025

Uh oh!

elasticmachine commented Nov 5, 2025

Uh oh!

weronikaolejniczak left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

[EuiSuperDatePicker] Time window buttons #9151

[EuiSuperDatePicker] Time window buttons #9151

Uh oh!

Conversation

acstll commented Oct 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why are we making this change?

Screenshots

Figma

Impact to users

QA

Accessibility

General checklist

Uh oh!

weronikaolejniczak Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

weronikaolejniczak Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

weronikaolejniczak commented Nov 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Testing

Uh oh!

acstll commented Nov 4, 2025

Uh oh!

elasticmachine commented Nov 5, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Nov 5, 2025

💚 Build Succeeded

History

Uh oh!

weronikaolejniczak left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

acstll commented Oct 27, 2025 •

edited

Loading

weronikaolejniczak commented Nov 3, 2025 •

edited

Loading